<template>
	<view class="container">
		<mescroll-body :bottombar="false" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="downOption" :up="upOption">
			<view class="search">
				<u-search placeholder="请输入搜索关键字" v-model="keyword" :showAction="false" @clickIcon="goSearch"
					@search="goSearch"></u-search>
			</view>
			<view class="tabs-wrap">
				<u-tabs :itemStyle="itemStyle" :list="categories" :current="categoryCurrent" @change="categoryChange">
					<template v-slot:left>
						<view class="title">类型:</view>
					</template>
				</u-tabs>
			</view>
			<view class="tabs-wrap">
				<u-tabs :itemStyle="itemStyle" :list="category.tags" :current="tagCurrent" @change="tagChange">
					<template v-slot:left>
						<view class="title">标签:</view>
					</template>
				</u-tabs>
			</view>

			<view class="tabs-wrap sort-wrap">
				<u-tabs :itemStyle="itemStyle" :list="sortList" :current="sortCurrent" @change="sortChange">
					<template v-slot:right>
						<view class="resetCondition">
							<!-- <u-button text=""></u-button> -->
							<!-- <u--text type="primary" text="重置所有条件"></u--text> -->
							<u-tag text="重置所有条件" plain type="primary" @click="resetCondition"></u-tag>
						</view>
					</template>
				</u-tabs>
			</view>

			<view class="" style="margin-top: 20rpx;">
				<view class="item-row" v-for="item in dataList" :key="item.id" @click="viewPost(item.id)">
					<uni-row :gutter="12" class="">
						<uni-col :span="10">
							<view class="item">
								<view class="item-image-wrap">
									<u--image class="item-image" width="100%" height="412rpx" :showLoading="true"
										:lazyLoad="true" :src="item.pic" mode="aspectFill">
										<template v-slot:loading>
											<u-loading-icon></u-loading-icon>
										</template>
									</u--image>
								</view>
							</view>
						</uni-col>
						<uni-col :span="14">
							<view class="right-wrap">
								<view class="title-wrap">
									<rich-text :nodes="item.title" class="u-line-2 title"></rich-text>
								</view>
								<view class="category-wrap u-flex u-flex-items-center u-flex-between">
									<u-tag :text="item.category" plain> </u-tag>
									<u-row v-if="item.pageViews" >
										<view class="" style="white-space: nowrap;margin-right: 0.2em">
											<u--text text="阅读:"></u--text>
										</view>
										<u--text :text="item.pageViews | priceFormat"></u--text>
									</u-row>
								</view>
								<view class="summary-wrap">
									<rich-text :nodes="item.summary" class="u-line-5 summary"></rich-text>
								</view>
							</view>
						</uni-col>
					</uni-row>
				</view>

			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import {
		getRandomColor
	} from "../../utils/index.js"
	import MescrollMixin from "../../uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		list
	} from "@/api/category.js"
	import {
		list as mitoPostList
	} from "@/api/mitoPost.js"
	import {
		mapMutations,
		mapState
	} from "vuex"

	const allTag = "全部"

	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				categories: [],
				categoryCurrent: 0,
				tagCurrent: 0,
				keyword: this.$store.state.search.params.title,
				sortList: [{
						name: "最新",
						value: ""
					},
					{
						name: "最热",
						value: "hot"
					}
				],
				sortCurrent: 0,
				// params: {

				// },
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {

				},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 6, // 配置列表的总数量要大于等于10条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					},
					textNoMore: "没有更多了"
				},
				dataList: [],
				itemStyle: {
					height: uni.$u.getPx("72rpx", true)
				}
			}
		},
		computed: {
			...mapState("search", ["params"]),
			category() {
				return this.categories.length > 0 ? this.categories[this.categoryCurrent] : {}
			}
		},
		filters: {
			priceFormat: function(value) {
				return uni.$u.priceFormat(value)
			}
		},
		methods: {
			...mapMutations("search", ["setParams"]),
			getCategory() {
				list().then(data => {
					const myTags = {
						[allTag]: null
					}
					this.categories = data.map(item => {
						const tags = JSON.parse(item.tag)
						item.tags = (tags.map(tag => {
							if (!myTags[tag]) {
								myTags[tag] = null
							}
							return {
								name: tag
							}
						}))
						item.tags.unshift({
							name: allTag
						})
						return item
					})
					const tags = Object.keys(myTags).map(item => ({
						name: item
					}))
					this.categories.unshift({
						name: allTag,
						tags
					})

					this.categoryCurrent = this.params?.category && this.params?.category !== '' ? this.categories
						.findIndex(item => item
							.name === this.params.category) : 0
					this.tagCurrent = this.params?.tags && this.params?.tags !== '' ? this.category.tags.findIndex(
						item => item.name ===
						this.params.tags) : 0

					this.mescroll.endDownScroll()
					this.query()
				})
			},
			query(page = {
				num: 1,
				size: 10
			}) {
				const params = {}
				if (this.params?.title && this.params?.title !== "") {
					params.title = this.params.title
				}
				if (this.params?.category && this.params?.category !== "全部") {
					params.category = this.params.category
				}
				if (this.params?.tags && this.params?.tags !== "全部") {
					params.tags = this.params.tags
				}
				if (this.params?.sortField && this.params?.sortField !== "") {
					params.sortField = this.params.sortField
				}
				console.log(params)
				this.upOption.page
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				mitoPostList({
					...params,
					pageNum,
					pageSize
				}).then(res => {
					const {
						content,
						last,
						totalElements
					} = res
					//设置列表数据
					if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
					this.dataList.push(...content); //追加新数据
					this.mescroll.endBySize(content.length, totalElements);
				}).catch(() => {
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				})
			},
			goSearch(value) {
				this.clearList()
				this.setParams({
					...this.params,
					title: this.keyword
				})
				this.query()
				// this.startSearch()
			},
			downCallback() {
				this.getCategory()
				this.restQueryParams()
				this.mescroll.resetUpScroll();
			},
			/*上拉加载的回调*/
			upCallback(page) {
				this.query(page)
			},
			restQueryParams() {
				this.dataList = []
			},
			viewPost(id) {
				uni.$u.route({
					url: "pages/post-detail/post-detail",
					params: {
						id
					}
				})
			},
			categoryChange({
				index
			}) {
				this.categoryCurrent = index
				this.tagCurrent = 0
				this.clearList()
				this.$nextTick(() => {
					this.setParams({
						...this.params,
						category: this.category?.name,
						tags: this.category?.tags[this.tagCurrent]?.name
					})
					this.query()
				})
			},
			tagChange({
				index
			}) {
				this.tagCurrent = index
				this.clearList()
				this.$nextTick(() => {
					this.setParams({
						...this.params,
						tags: this.category?.tags[this.tagCurrent]?.name
					})
					this.query()
				})
			},
			sortChange({
				index,
				value
			}) {
				this.sortCurrent = index
				this.clearList()
				this.$nextTick(() => {
					this.setParams({
						...this.params,
						sortField: value
					})
					this.query()
				})
			},
			clearList(){
				this.dataList = []
			},
			resetCondition() {
				this.clearList()
				this.setParams({
					...this.params,
					title: "",
					category: "",
					tags: "",
					sortField: ""
				})
				this.categoryCurrent = 0
				this.tagCurrent = 0
				this.sortCurrent = 0
				this.keyword = ""
				this.query()

			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {

		// padding: 20rpx;
		.search {
			padding: 20rpx;
			background-color: #fff;
		}

		.item-row {
			margin: 20rpx 0;
			background-color: $u-bg-color;

			.right-wrap {
				padding: 20rpx 12rpx 20rpx 6rpx;

				.title {
					font-size: 1.1em;
					font-weight: bold;
				}

				.category-wrap {
					margin: 20rpx 0;
				}
			}
		}

		.item {
			background-color: $u-bg-color;
			// margin-bottom: 12rpx;
			display: flex;
			flex-direction: column;

			.item-image-wrap {
				position: relative;
				height: 412rpx;

				.item-image {
					width: 100%;
					height: auto;
				}
			}

			.title-wrap {
				padding: 8rpx 8rpx;
				box-sizing: border-box;
				background-color: rgba(0, 0, 0, 0.3);
				color: $u-primary-light;
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 56rpx;
				display: flex;
				align-items: center;
			}

			.title {
				text-align: center;
				width: 100%;
			}

			.summary-wrap {
				padding: 8rpx 8rpx;

			}

			.summary {
				height: 80rpx;
				line-height: 40rpx;
			}
		}
	}

	.tags-wrap {
		// margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding: 10rpx;
	}


	.tabs-wrap {
		padding: 0 20rpx;

		&.sort-wrap {
			padding-left: 0;

			/deep/ .resetCondition {
				float: right;
				display: flex;
				align-items: center;
				height: 72rpx;
			}

			&::after {
				content: "";
				clear: both;
				display: block;
			}
		}


		.title {
			white-space: nowrap;
			line-height: 72rpx;
			font-size: 15px;
			padding-right: 8rpx;
			// margin-left: 10rpx;
		}

		::-webkit-scrollbar {
			display: none;
		}

		// /deep/ .u-tabs__wrapper__nav .u-tabs__wrapper__nav__item:first-child {
		// 	padding: 0 11px 0 0;
		// }

		// /deep/ .u-tabs__wrapper__nav .u-tabs__wrapper__nav__item:nth-last-child(2) {
		// 	padding: 0 0 0 11px;
		// }
	}

	.tag {
		margin: 10rpx 10rpx;
		display: inline-block;

		/deep/ .u-tag {
			display: flex;
			justify-content: center;
		}
	}
</style>
